﻿requirejs.config({
    baseUrl: ".",
    paths: {
    	zepto:"javascripts/zepto.min",
    	dingtalk:"javascripts/dingtalk",
        vue: "components/vue/vue.min",
        axios: "components/axios/axios.min",
        MINT: "components/mint-ui/index",
        moment: "components/moment/moment.min",
        echarts: "components/echarts/echarts.min",
        common: "resources/js/common"
    },
    shim: {
        "MINT": {
            deps: ["vue"],
            exports: "MINT"
        }
    }
});

require(["zepto","dingtalk","vue", "axios", "moment", "common", "MINT", "echarts"], function (zepto,dingtalk,Vue, axios, moment, common, MINT, echarts) {

    Vue.component(MINT.Navbar.name, MINT.Navbar);
    Vue.component(MINT.TabItem.name, MINT.TabItem);

    window.MINT = MINT;

    var vm = new Vue({
        el: "#view",
        data: {
            momentDate: moment(moment().format("YYYY-MM-DD")),
            reportType: 1
        },
        computed: {
            reportDate: {
                set(newValue) {
                    this.momentDate = new moment(newValue);
                },
                get() {
                    return this.momentDate.format("YYYY-MM-DD");
                }
            },
            day: function () {
                return common.calendar.getDay(this.momentDate.format("d"));
            },
            year: function () {
                return this.momentDate.format("YYYY");
            },
            date: function () {
                return this.momentDate.format("MM.DD");
            }
        },
        watch: {
            reportType: function (val, oldVal) {
                this.reportChange();
            }
        },
        mounted: function () {
            this.reportChange();
        },
        methods: {
            addDay: function (value) {
                this.momentDate = moment(this.momentDate).add(value, "d");
                this.reportChange()
            },
            reportChange: function () {
                var self = this;

                axios.get("report/getGeneralCharts?reportType=" + this.reportType + "&reportDate=" + this.reportDate)
                    .then(function (response) {
                        self.setBar("", response.data[0], "bar0");
                        self.setBar("", response.data[1], "bar1");
                        self.setBar("", response.data[2], "bar2");
                        self.setBar("", response.data[3], "bar3");
                    });
            },
            setBar: function (title, bar, id) {
                var names = [];
                var values = [];

                var data = [];

                for (var name in bar) {
                    names.push(name + "\r\n" + bar[name]);
                    values.push(bar[name]);

                    data.push({
                        name: name + "\r\n" + bar[name],
                        data: [bar[name]],
                        type: "bar"
                    })
                }

                var size27 = common.getFontSize(27);
                var size30 = common.getFontSize(30);

                var option = {
                    title: {
                        text: title,
                        padding: size27,
                        textStyle: {
                            color: "#323232",
                            fontSize: size27
                        }
                    },
                    grid: {
                        top: "15%",
                        bottom: "15%"
                    },
                    xAxis: {
                        data: names,
                        axisLabel: {
                            textStyle: {
                                color: "#909090",
                                fontSize: size30
                            }
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            textStyle: {
                                color: "#909090",
                                fontSize: size27
                            }
                        }
                    },
                    series: [{
                        name: "单数",
                        type: "bar",
                        data: values
                    }],
                    backgroundColor: "#F0F0F0",
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colors = ["#3E75E4", "#3ECBE5", "#E6AD40"];
                                return colors[params.dataIndex];
                            }
                        }
                    }
                };

                this.setChart(id, option);
            },
            setChart: function (id, option) {
                var chart = echarts.init(document.getElementById(id));
                chart.setOption(option);
            }
        }
    });
});